<script setup>
import { ref, reactive } from 'vue';
import { getActs } from '../../api/activity'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ElMessage } from 'element-plus'
import { addActs} from '../../api/user'
const dialogFormVisible = ref(false)
const actData = ref([
])
getActs()
  .then((res) => {
    console.log(res);
    actData.value = res.data.data
  })
const actDataone = ref('')
function openpage(data) {
  dialogFormVisible.value = true
  actDataone.value = data
}
function appyes(data) {
  addActs({
    name: data.name,
    url: data.url
  })
  getActs()
    .then((res) => {
      console.log(res);
      actData.value = res.data.data
    })
  dialogFormVisible.value = false
  ElMessage('报名成功')
}
function appno() {
  dialogFormVisible.value = false
  ElMessage('取消报名成功')
}

</script>
<template>
  <div class="mian">
    <el-config-provider :locale="zhCn">
      <el-calendar class="calender">
        <template #date-cell="{ data, date }">
          <span>{{ data.day.split('-').slice(1).join('-') }}</span>
          <div v-for="item in actData" :key="item.id" class="actpage">
            <img class="caleimg" :src="item.url" alt="" v-if="(item.id).indexOf(data.day.split('-').slice(1).join('-')) != -1">
            <div class="click" v-if="data.isSelected && (item.id).indexOf(data.day.split('-').slice(1).join('-')) != -1">
              <el-button type="warning" class="clickbutton" @click="openpage(item)">点击报名</el-button>
            </div>
            <span class="actname" :style="{ color: item.color }" v-if="(item.id).indexOf(data.day.split('-').slice(1).join('-')) != -1">{{ item.name
            }}</span>
          </div>
        </template>
      </el-calendar>
      <el-dialog v-model="dialogFormVisible" title="活动详情">

        <div class="actmain">
          <h1>{{ actDataone.name }}</h1>
          <img class="actimg" :src="actDataone.url" alt="">
          <p>{{ actDataone.des }}</p>
          <br>
          <span class="lns">地点：{{ actDataone.location }}</span>
          <span class="lns">人数：{{ actDataone.num }}</span>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button :plain="true" @click="appyes(actDataone)" type="warning">报名活动</el-button>
            <el-button :plain="true"  @click="appno()">
              取消报名
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-config-provider>
  </div>
</template>
<style scoped>
.actpage {
  position: relative;
}

.actname {
  position: absolute;
  top: -25px;
  right: 0;
}

.calender {
  background: url('../../assets/bg.jpg') no-repeat;
  background-size: 100% 100%;
}

.click {
  position: absolute;
  top: 30px;
}

.clickbutton {
  width: 50px;
  height: 10px;
  font-size: 12px;

}

.caleimg {
  position: absolute;
  width: 100%;
  height: 55px;

}

.actmain {
  text-align: center;
}

.lns {
  padding: 20px;
}

.actimg {
  width: 70%;
}</style>